import React, { PureComponent, Fragment } from 'react';
import {
  Form,
  Input,
  Select,
  Modal,
  Radio,
} from 'antd';
import { phone, email } from '@/utils/regular';

const FormItem = Form.Item;
const { TextArea } = Input;

const RadioGroup = Radio.Group;


@Form.create()
class UpdateForm extends PureComponent {
  constructor(props) {
    super(props);
    this.formLayout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 13 },
    };
  }

  // 表单
  renderContent = () => {
    const { form, values } = this.props;

    return [
      <FormItem key="brandName" {...this.formLayout} label="银行中文全称">
        {form.getFieldDecorator('bankName', {
          rules: [{ required: true, message: '请输入银行中文全称！' }],
          initialValue: values.bankName,
        })(<Input placeholder="请输入银行中文全称"/>)}
      </FormItem>,

      <FormItem key="brandIcon" {...this.formLayout} label="英文缩写">
        {form.getFieldDecorator('bankEngName', {
          rules: [{ required: true, message: '请输入英文缩写！' }],
          initialValue: values.bankEngName,
        })(<Input placeholder="请输入英文缩写"/>)}
      </FormItem>,
      <FormItem key="status" {...this.formLayout} label="状态">
        {form.getFieldDecorator('status', {
          rules: [{ required: true, message: '请选择状态！' }],
          initialValue: values.status,
        })(
          <RadioGroup>
            <Radio value={1}>启用</Radio>
            <Radio value={2}>暂停</Radio>
          </RadioGroup>,
        )}
      </FormItem>,
      <FormItem key="remark" {...this.formLayout} label="限额描述">
        {form.getFieldDecorator('remark', {
          initialValue: values.remark,
          rules: [{ required: true, message: '请输入至少五个字符的限额描述！', min: 5 }],
        })(<TextArea rows={4} placeholder="请输入至少五个字符"/>)}
      </FormItem>,
    ];
  };

  //弹窗
  render() {
    const { updateModalVisible, handleUpdateModalVisible, modalVisible } = this.props;
    //完成
    const handleNext = () => {
      const { form, values, handleUpdate, handleAdd, modalVisible } = this.props;
      form.validateFields((err, fieldsValue) => {
        if (err) return;
        const formVals = { ...values, ...fieldsValue };

        if (modalVisible) {
          handleAdd(formVals);
        } else {
          handleUpdate(formVals);

        }
      });
    };
    return (
      <Modal
        width={640}
        bodyStyle={{ padding: '32px 40px 48px' }}
        destroyOnClose
        title={modalVisible ? '新增' : '修改'}
        visible={updateModalVisible}
        onOk={handleNext}
        onCancel={() => handleUpdateModalVisible(false, [])}
      >
        {this.renderContent()}
      </Modal>
    );
  }
}

export default UpdateForm;
